$(function () {
    // 调登录的接口获取数据渲染页面
    var id = getCookie('id');//从cookie中取id
    console.log(id)
    $.ajax({
        type: "get",
        url: "http://jx.xuzhixiang.top/ap/api/allproductlist.php",
        data: { uid: id },//查看接口中，从cookie取到id，请求后台id为34175的用户的数据
        dataType: "json",
        success: function (result) {
            // console.log(result)
            //后台拿到的数据是一个大的对象。里边有data，和mesg,data是数组里包对象，每一个对象是一个列表的数据
            var data = result.data;
            console.log(data)
            // console.log(data)此时的data是数组包的对象，遍历数组拿到对象渲染页面即可
            //   截取索引为5到20的数据渲染第一个唇膏的列表
            // slice截取索引参数一到参数二的数组中的元素(不包括参数二的元素)，并将这些元素组成新的数组返回
            var data1 = $(data).slice(6,18);//截取索引6到18的12个元素
            // console.log(data1)
            // console.log(data[1].pdesc)
            var str='';

            //jq的each遍历，i是索引
            $(data1).each(function (i) {
                str += `<div class="list-connect">
                            <h4>${data1[i].pname}</h4>
                            <b>POWDER KISS LIPSTICK</b>
                            <p>${data1[i].pdesc}</p>
                            <a href='details.html?product_id=${data1[i].pid}'><img src=${data1[i].pimg}></a>
                            <div class="list-bottom">
                                <span>${data1[i].pprice}</span>
                            <div class="look">查看详情</div>
                            </div>
                        </div>`
            })
            $('.showF').html(str)
            
            // 渲染子弹头的列表展示
            var data2 = $(data).slice(6,14);
            var str1 = '';
            $(data2).each(function(i){
                 str1 += `<div class="list-connect">
                            <h4>${data2[i].pname}</h4>
                            <b>POWDER KISS LIPSTICK</b>
                            <p>${data2[i].pdesc}</p>
                            <a href='details.html?product_id=${data2[i].pid}'><img src=${data2[i].pimg}></a>
                            <div class="list-bottom">
                                <span>${data2[i].pprice}</span>
                            <div class="look" data-id="${id}">查看详情</div>
                            </div>
                        </div>`
            })
            $('.showS').html(str1)
            // 渲染子弹头的列表
            var data3 = $(data.slice(0,1))//取索引0的元素
            // console.log(data3)
            var str3='';
            for(let j = 0;j<4;j++){
                $(data3).each(function(i){
                    str3 += `<div class="list-connect">
                               <h4>${data3[i].pname}</h4>
                               <b>LIPSTICK / MARBLE</b>
                               <p>${data3[i].pdesc}</p>
                               <a href='details.html?product_id=${data3[i].pid}'><img src=${data3[i].pimg}></a>
                               <div class="list-bottom">
                                   <span>${data3[i].pprice}</span>
                               <div class="look" data-id="${id}">查看详情</div>
                               </div>
                           </div>`
               })
               $('.showT').html(str3)
            }
            // $('.look').click(function(){
            //     window.location.href()
            // })
            // 实现点击图片跳转到详情页
            // 注意这里的图片是ajax请求数据渲染的，是异步操作，所以要在success中获取
            // 在success外拿不到，因为ajax请求数据先挂起执行下边的
            // 代码，，所以拿不到图片，点击跳转事件也无法生效
            // // console.log($('.to-details'))
            // $('.to-details').click(function(){
            //     window.location.href='details.html'
            // })
            // 或者直接写在a标签上，用href将商品的id拼在跳转路径中，将来在详情页购物车页获取该商品id，渲染
        
        }

    });

   

    // .click(function(){
    //     window.location.href='details.html'
    // })



})
